<template>
  <div>
    <el-dialog :model-value="dialogVisible" title="用户列表" @close="closeFn">
      <el-form :model="form" :rules="rules" ref="ruleFormRef">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="form.nickName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        {{ editId }}
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="form.note" type="textrea" autocomplete="off" />
        </el-form-item>

        <el-form-item label="是否启用" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, watch } from "vue";

// 验证邮箱规则
function checkEmail(rule: unknown, value: string | undefined, callback: any) {
  let reg = /^\w+[@]\w+\.\w{2,3}$/;
  if (!value) {
    callback("请输入邮箱");
  } else if (!reg.test(value)) {
    callback("请输入正确的邮箱");
  } else {
    callback();
  }
}
// 验证表单规则
const rules = reactive({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  nickName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  email: [{ validator: checkEmail, trigger: "blur" }],
});

// 是否显示模态框
// withDefaults(props,默认值)
const props = withDefaults(
  defineProps<{
    dialogVisible: boolean;
    editId: number;
  }>(),
  {
    dialogVisible: false,
    editId: 0,
  }
);

// form表单默认值
let form = reactive({
  id: 0,
  username: "",
  password: "",
  email: "",
  nickName: "",
  note: "",
  status: 1,
});

// 根据id请求用户信息
watch(
  () => props.editId,
  () => {
    if (props.editId != 0) {
      http.admin.getAdmininofId(props.editId).then((res) => {
        console.log(res);
        // 将请求的用户信息给from表单
        Object.assign(form, res.data);
      });
    } else {
      ruleFormRef.value.resetFields();
    }
  }
);

const emit = defineEmits<{
  (event: "cancel"): void;
  (event: "confirm"): void;
}>();
// 点击取消   子传父
function cancelFn() {
  emit("cancel");
  ruleFormRef.value.resetFields();
}

const ruleFormRef = ref();

// 提取添加
function editAdd() {
  // 新增
  ElMessageBox.confirm("”此操作将新增用户信息，是否继续?”", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //   调用新增接口
      http.admin.adminRegister(form).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // 提示成功
          ElMessage.success("新增成功");
          // 清楚表单数据
          ruleFormRef.value.resetFields();
          emit("confirm");
        }
      });
    })
    .catch(() => {
      ElMessage.warning("取消当前操作！");
    });
}
// 提取修改
function editUpdata() {
  ElMessageBox.confirm("”此操作将修改用户信息，是否继续?”", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //   调用修改接口
      http.admin.updataAdmininfo(form).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // 提示成功
          ElMessage.success("修改成功");
          // 清楚表单数据
          ruleFormRef.value.resetFields();
          emit("confirm");
        }
      });
    })
    .catch(() => {
      ElMessage.warning("取消当前操作！");
    });
}
// 点击添加
function confirmFn() {
  ruleFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      console.log("验证通过");
      if (form.id == 0) {
        // 新增
        editAdd();
      } else {
        //   编辑
        editUpdata();
      }
    } else {
      console.log("验证失效");
    }
  });
}
// 关闭X的回调
function closeFn() {
  emit("cancel");
}
</script>

<style lang="less" scoped>
:deep(.el-form) {
  padding: 40px;
}
</style>
